DOM Image and Sound Rollover v4.0
Updated: Nov 22nd' 11 to version 4 by DD, which adds optional sound playback as well onmouseover.
Description: Image rollovers represent the classic and "timeless" JavaScript effect. Well, this DOM script makes the process of adding them as simple as can be, by allowing you to apply a rollover to any image through just the insertion of a class attribute inside the image's tag. Here's an example:
<img src="original.jpg" class="domroll hover.jpg" />
Viola. The above image
instantly will swap between "original.jpg" and
"hover.jpg" depending on your mouse state! The script also
supports playing a sound on the hover state using HTML5's <audio>
element, which works in IE9+, FF3.5+, Chrome/Safari 3+, and Opera 10.5+.
Just make use of the "data-sound" attribute:
<img src="original.jpg" class="domroll hover.jpg" data-sound="click.mp3, click.ogg" />
Demo: Move your mouse over the following image:
Sound effect added in below rollover (compatible in IE9+,
FF3.5+, Chrome/Safari 3+, and Opera 10.5+):
Directions 
Step 1: Insert the below script into the <BODY> section of your page, at the very end, after all content on the page:
Step 2: Download the external JavaScript file "chrisdomroll.js" (right click, and select "Save As"), and upload to your web server. You may need to change the "src" reference in the code of Step 1 above to correctly point to where you've uploaded this external JS file. And that's it! You're now ready to easily add a rollover effect to any image on the page.
Adding a image rollover effect to an image (written by author)
Now, here comes the special bit. For any image you want to add a rollover effect to, find it in the HTML. Once you've found it, make it hover like so:
<img src="original.jpg" class="domroll hover.jpg" />
Here, the original image is original.jpg. As you can see, simply insert the class attribute inside the image tag, where "domroll" doesn't change, and "hover.jpg" is the image you wish to rollover to when the mouse moves over the image. You need the space in between the two values.
If you find that your image already has a class attribute such as:
<img src="original.jpg" class="yellowBorder">
Don't worry. Just add the new bit at the end, still within the class attribute:
<img src="original.jpg" class="yellowBorder domroll hover.jpg">
You could even add the new bit at the beginning if you wanted. The script does the rest for you.
Adding an accompanying sound effect (v4.0 feature)
To also add an accompanying sound to playback when the mouse rolls over the image, make use of the "data-sound" attribute, added inside the <IMG> tag:
<img src="original.jpg" class="domroll hover.jpg" data-sound="click.mp3, click.ogg" />
"data-sound" should be set to a list of audio files
of the same sound but at at very least in .mp3 and .ogg formats. Why the
multiple formats? This is since different browsers support different audio
formats: Firefox/Chrome/Opera support the .ogg format while IE9+/Safari support
the mp3 format instead. So at a minimum you should define at least these two
file formats, with possibly "wav" as well for maximum browser support. Separate
each file name with a comma, and if a file is in a different directory than the
current page, include the path to it from the current page as well (ie: "myfiles/click.mp3")
To test out adding sound to your rollover effect, you can download the below two sound files:
To convert one audio format to another, you can use an online audio converter such as this one. For more free "click" related sound clips, check out this site.